<template>
  <BaseMainSlot>
    <!-- 这页面 -->
    <template v-slot:zhactbar>
      <ActionBar
        :page-no="109"
        :add-active="addActive"
        :del-active="delActive"
        :cancel-active="cancelActive"
        :has-edit="false"
        :has-del="false"
        :has-save="false"
        :save-active="saveActive"
        :has-fasong="true"
        fasong-text="breedVarietiesManagement"
        @fasong="examine"
        @add="adds"
        @cancel="cancel"
        @del="del"
      />
      <!-- <el-button
        class="examine"
        @click="examine"
      > 种养品种提交 </el-button>-->
    </template>
    <template v-slot:boxleft>
      <div class="zhtabletitle" style="margin: 15px 0px">已有种养品种</div>
      <el-table
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="calc(100% - 90px)"
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="plantTypeName" label="种养类型" />
        <el-table-column prop="plantVarietyName" label="种养品种名称" />
        <!-- <el-table-column
          prop="description"
          label="描述"
          show-overflow-tooltip
        />-->
        <el-table-column label="最佳种养时间">
          <template
            v-if="scope.row.plantVarietyNo"
            slot-scope="scope"
          >{{ scope.row.sowingStartDate }} ~ {{ scope.row.sowingEndDate }}</template>
        </el-table-column>
        <el-table-column label="查看图片">
          <template v-if="scope.row.pictureNo" slot-scope="scope">
            <el-button
              class="text-btn-cursor"
              type="text"
              size="small"
              style="height: 10px"
              @click="handleImg(scope.row.pictureNo)"
            >
              <i class="el-icon-view"></i> 查看
            </el-button>

            <!-- <el-image
              style="width: 100px; height: 100px"
              :preview-src-list="['data:image/png;base64,' + handleImgUrl]"
            />-->
          </template>
        </el-table-column>
        <el-table-column width="200" label="操作">
          <template v-if="scope.row.plantVarietyNo" slot-scope="scope">
            <el-button
              v-if="judgePermission(104, 'delete')"
              class="text-btn-cursor"
              type="text"
              size="small"
              @click="!scope.row.pictureNo ? handleAdd(scope.row) : edit()"
            >
              <i
                :class="scope.row.pictureNo ? 'el-icon-edit-outline' : 'el-icon-plus'"
              ></i>
              {{ scope.row.pictureNo ? '修改图片' : '添加图片' }}
            </el-button>
            <el-button
              v-if="judgePermission(104, 'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              style="height: 10px"
              @click="handleDelete(scope.row.plantVarietyNo)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <template v-slot:boxright>
      <div class="zhtabletitle">
        所有种养品种
        <el-input
          v-model="plantVarietyName"
          class="w50p"
          clearable
          style="margin: 0 10px; width: 30%"
          placeholder="搜索种养品种名称"
          @input="searchtwo"
        />
        <el-select
          v-model="plantTypeNo"
          filterable
          clearable
          placeholder="搜索种养类型"
          @change="searchtwo"
        >
          <el-option
            v-for="(item, index) in plantTypeList"
            :key="index"
            :label="item.plantTypeName"
            :value="item.plantTypeNo"
          />
        </el-select>
      </div>
      <el-table
        v-loading="loadingtwo"
        highlight-current-row
        :data="tableDatatwo"
        stripe
        border
        height="calc(100% - 90px)"
        @selection-change="handleSelectionChangetwo"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="plantTypeName" label="种养类型" />
        <el-table-column prop="plantVarietyName" label="种养品种名称" />
        <!-- <el-table-column
          prop="description"
          label="描述"
          show-overflow-tooltip
        />-->
        <el-table-column label="最佳种养时间">
          <template
            v-if="scope.row.plantVarietyNo"
            slot-scope="scope"
          >{{ scope.row.sowingStartDate }} ~ {{ scope.row.sowingEndDate }}</template>
        </el-table-column>
        <el-table-column label="查看图片">
          <template v-if="scope.row.pictureNo" slot-scope="scope">
            <el-button
              class="text-btn-cursor"
              type="text"
              size="small"
              style="height: 10px"
              @click="handleImgs(scope.row.pictureNo)"
            >
              <i class="el-icon-view"></i> 查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSizetwo"
        :current-page="currentPagetwo"
        :total-size="totalSizetwo"
        @changePageSize="changePageSizetwo"
        @changeCurrentPage="changeCurrentPagetwo"
      />
    </template>
    <template v-slot:dig>
      <el-dialog title="查看图片" :visible.sync="dialogVisible" width="40%">
        <img
          style="max-width: 100%;text-align: center;
                position: relative;
            left: 50%;
            transform: translateX(-50%);
            max-height: 100%;"
          :src="'data:image/png;base64,' + handleImgUrl"
          alt
        />
      </el-dialog>

      <el-dialog
        :title="titleText + '种养品种图片'"
        :visible.sync="dialogFormVisible"
        :before-close="cancel"
        class="VarietyImg"
        width="40%"
      >
        <el-form
          id="uploadForm"
          :model="formData"
          onsubmit="return false;"
          target="frameName"
          name="fileinfo"
          method="post"
          enctype="multipart/form-data"
        >
          <!-- <el-form-item label="批次名称:" class="w50p" prop="batchNo"> -->
          <!-- <el-select
              v-model="formData.batchNo"
              clearable
              @change="changebatchid"
            >
              <el-option
                v-for="item in batchList"
                :key="item.batchNo"
                :label="item.batchName"
                :value="item.batchNo"
              />
          </el-select>-->
          <!-- </el-form-item> -->
          <el-form-item label="图片:" class="w50p">
            <div class="img_box">
              <div
                v-for="(item,index) of imgList"
                v-show="imgList.length!=0"
                :key="index"
                class="img_size"
              >
                <img
                  v-if="item.file.type.indexOf('image') !== -1"
                  :src="item.file.src"
                />
                <div class="remove_logo" @click="fileDel">×</div>
              </div>
              <div v-show="addState" class="add_img" @click="fileClick">
                <span>+</span>
              </div>
              <input
                id="inpu"
                ref="file"
                style="display: none;"
                type="file"
                accept="image/*"
                @change="fileChange($event)"
              />
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel">取 消</el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="save('formData')"
          >保 存</el-button>
        </div>
      </el-dialog>

      <!-- 新增业务组件的弹框 -->
      <dialogds
        title="种养品种"
        :visible="dialogExamineFormVisible"
        @close="close"
        @titlebtn="titlebtn"
      >
        <template v-slot:form>
          <el-form
            ref="ExamineForm"
            label-position="left"
            :model="ExamineForm"
            class="el-form"
          >
            <el-form-item
              :rules="[{
                message: '种养名称不能为空',
                trigger: 'blur',
                required: true
              }]"
              label="种养品种名称:"
              prop="plantVarietyName"
              class="w50p"
            >
              <el-input v-model="ExamineForm.plantVarietyName" clearable />
            </el-form-item>
            <el-form-item
              :rules="[{
                message: '种养类型不能为空',
                trigger: 'blur',
                required: true
              }]"
              label="种养类型:"
              prop="plantTypeNo"
              class="w50p"
            >
              <el-select
                v-model="ExamineForm.plantTypeNo"
                filterable
                class="selcect-one"
              >
                <el-option
                  v-for="(comitem, comindex) in categoryTypeList"
                  :key="comindex"
                  :value="comitem.plantTypeNo"
                  :label="comitem.plantTypeName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="最佳种养时间:" class="w100p">
              <el-form-item
                :rules="[{
                  message: '开始月份不能为空',
                  trigger: 'blur',
                  required: true
                }]"
                prop="sowingStartDate"
                class="w50p"
              >
                <el-date-picker
                  v-model="ExamineForm.sowingStartDate"
                  type="month"
                  format="MM月"
                  value-format="MM月"
                  placeholder="选择开始月份"
                />
              </el-form-item>
              <span style="padding: 0 10px">~</span>
              <!-- <span>~</span> -->
              <el-form-item
                :rules="[{
                  message: '结束月份不能为空',
                  trigger: 'blur',
                  required: true
                }]"
                prop="sowingEndDate"
                class="w50p"
              >
                <el-date-picker
                  v-model="ExamineForm.sowingEndDate"
                  type="month"
                  format="MM月"
                  value-format="MM月"
                  placeholder="选择结束月份"
                />
              </el-form-item>
            </el-form-item>
            <!-- <el-form-item label="种养图片:" prop="pictureNo" class="w100p">
              <ele-upload-image
                v-model="image"
                multiple
                :response-fn="handleResponse"
                :before-remove="handleRemove"
                :headers="headers"
                :file-size="10"
                :action="ImageUrl()"
              />
            </el-form-item>-->
          </el-form>
          <!-- <div>
          </div>-->
        </template>
        <template v-slot:btn>
          <el-button class="zh-button-two" type="primary" @click="savemes">提 交</el-button>
        </template>
        <template v-slot:table>
          <el-input
            v-model="esname"
            style="margin-bottom: 10px;width: 30%;"
            placeholder="输入名称查询"
            clearable
            @input="titlebtn(2)"
          />

          <el-table
            v-loading="loading"
            highlight-current-row
            :data="ExamineTable"
            stripe
            border
            height="calc(100% - 90px)"
          >
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="plantVarietyName" label="种养品种名称" />
            <el-table-column prop="plantTypeName" label="种养类别" />
            <el-table-column prop="description" label="最佳种养时间">
              <template slot-scope="scope">
                {{ scope.row.sowingStartDate }}
                <span
                  v-if="scope.row.sowingStartDate&&scope.row.sowingEndDate"
                >~</span>
                {{ scope.row.sowingEndDate }}
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="原因">
              <template slot-scope="scope">{{ scope.row.reason || '————' }}</template>
            </el-table-column>
            <el-table-column prop="applyStatus" label="状态">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.applyStatus === 1"
                  style="color: yellow;font-weight: 600;"
                >审核中</span>
                <span
                  v-if="scope.row.applyStatus === 0"
                  style="color: green;font-weight: 600;"
                >通过</span>
                <span
                  v-if="scope.row.applyStatus === 2"
                  style="color: red;font-weight: 600;"
                >审核不通过</span>
              </template>
            </el-table-column>
            <el-table-column width="200" label="操作">
              <template slot-scope="scope">
                <el-button
                  class="text-btn-cursor"
                  type="text"
                  :disabled="scope.row.applyStatus !== 1"
                  size="small"
                  style="height: 15px"
                  @click="Examineedit(scope.row)"
                >
                  <i class="el-icon-edit-outline"></i>修 改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </dialogds>
      <el-dialog title="提示" :visible.sync="dialogExaminesVisible" width="58%">
        <el-form
          ref="ExamineForms"
          label-position="left"
          :model="ExamineForms"
          class="el-form"
        >
          <el-form-item
            :rules="[{
              message: '种养名称不能为空',
              trigger: 'blur',
              required: true
            }]"
            label="种养品种名称:"
            prop="plantVarietyName"
            class="w50p"
          >
            <el-input v-model="ExamineForms.plantVarietyName" clearable />
          </el-form-item>
          <el-form-item
            :rules="[{
              message: '种养类型不能为空',
              trigger: 'blur',
              required: true
            }]"
            label="种养类型:"
            prop="plantTypeNo"
            class="w50p"
          >
            <el-select
              v-model="ExamineForms.plantTypeNo"
              filterable
              class="selcect-one"
            >
              <el-option
                v-for="(comitem, comindex) in categoryTypeList"
                :key="comindex"
                :value="comitem.plantTypeNo"
                :label="comitem.plantTypeName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="最佳种养时间:" class="w100p">
            <el-form-item
              :rules="[{
                message: '开始月份不能为空',
                trigger: 'blur',
                required: true
              }]"
              prop="sowingStartDate"
              class="w50p"
            >
              <el-date-picker
                v-model="ExamineForms.sowingStartDate"
                type="month"
                format="MM月"
                value-format="MM月"
                placeholder="选择开始月份"
              />
            </el-form-item>
            <span style="padding: 0 10px">~</span>
            <!-- <span>~</span> -->
            <el-form-item
              :rules="[{
                message: '结束月份不能为空',
                trigger: 'blur',
                required: true
              }]"
              prop="sowingEndDate"
              class="w50p"
            >
              <el-date-picker
                v-model="ExamineForms.sowingEndDate"
                type="month"
                format="MM月"
                value-format="MM月"
                placeholder="选择结束月份"
              />
            </el-form-item>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            class="zh-button-one"
            @click="dialogExaminesVisible = false"
          >取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="savees">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar/index";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/breed-varieties-management";
import nowcategory from "@/api/basic-info-manage/category-management";
import dialogds from "../component/dialog.vue";
import BaseMainSlot from "@/components/BaseMainSlot/basezuoyou.vue";
import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";
import axios from "axios";
// import { getToken } from '@/utils/auth';
export default {
  name: "BreedVarietiesManagement",
  components: { ActionBar, Pagination, BaseMainSlot, dialogds },
  mixins: [mymixin],
  data() {
    return {
      // ----表格二号----
      loadingtwo: true,
      // 当前页
      currentPagetwo: 1,
      // 每页的数据条数
      pageSizetwo: 10,
      // 总条数
      totalSizetwo: 0,
      tableData: [],
      // 表格二号数据
      tableDatatwo: [],
      // 是否能输入
      // -------
      canInput: false,
      rules: {},
      // 选中的数据项数组 employeeId组成 (此数组最多为一个)
      nowselectedList: [],
      dialogVisible: false,
      handleImgUrl: "",
      plantTypeList: [],
      plantTypeNo: undefined,
      plantVarietyName: undefined,
      dialogExamineFormVisible: false,
      addState: true,
      categoryTypeList: [],
      dialogExaminesVisible: false,
      ExamineForms: {}
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    imgList() {
      if (this.imgList.length === 1) {
        this.addState = false;
      } else {
        this.addState = true;
      }
    }
  },
  created() {
    this.getSelect();
  },
  mounted() {
    this.getTableDataListone();
    // 获取表格数据
    this.getTableDataListtwo();
  },
  methods: {
    examine() {
      this.dialogExamineFormVisible = true;
      // this.$refs['ExamineForm'].resetFields();
    },
    savemes() {
      this.$refs["ExamineForm"].validate(valid => {
        if (valid) {
          let param = {
            ...this.ExamineForm,
            organizationNo: sessionStorage.organizationNo,
            farming: 'PLANT'
          };
          nowpagereq.addList(param).then(response => {
            let mes = response;
            if (mes.code === 1) {
              this.$message.success("提交成功！");
              this.ExamineForm = {};
              this.$refs["ExamineForm"].resetFields();
              // this.gettabledataList()
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    Examineedit(e) {
      this.ExamineForms = { ...e };
      this.dialogExaminesVisible = true;
    },
    savees() {
      this.$refs["ExamineForms"].validate(valid => {
        if (valid) {
          let param = {
            ...this.ExamineForms
          };
          nowpagereq.editList(param).then(response => {
            let mes = response;
            if (mes.code === 1) {
              this.$message.success("修改成功！");
              this.ExamineForms = {};
              this.$refs["ExamineForms"].resetFields();
              this.dialogExaminesVisible = false;
              // this.gettabledataList()
              this.titlebtn(2);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close(e) {
      this.dialogExamineFormVisible = e;
    },
    titlebtn(e) {
      if (e === 2) {
        let params = {
          page: this.currentPage,
          size: this.pageSize,
          entity: {
            unitTypeNo: this.unitTypeNo,
            unitName: this.unitName
          },
          plantVarietyName: this.esname,
          farming: 'PLANT'
        };
        nowpagereq.getList(params).then(response => {
          let mes = response.data;
          if (response.code === 1) {
            this.ExamineTable = mes;
            this.resetActionBar();
          } else {
            this.$message.warning("获取表格失败");
          }
        });
      }
    },
    // 获取当前拥有类型表格
    getTableDataListone() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize
      };
      nowpagereq.getlist(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error("当前种养品种表格获取失败");
        }
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.totalElements;
        // 赋值数组
        this.tableData = data.content;
        this.addblankmet();
        this.resetActionBar();
        this.addActive = false;
      });
    },
    // 获取所有种养品种表格
    getTableDataListtwo() {
      this.loadingtwo = true;
      nowpagereq
        .getAllList({
          page: this.currentPagetwo,
          size: this.pageSizetwo,
          entity: {
            plantTypeNo: this.plantTypeNo,
            plantVarietyName: this.plantVarietyName,
            farmingTypeNo: sessionStorage.farmingTypeNo,
            farming: 'PLANT'
          }
        })
        .then(res => {
          this.loadingtwo = false;
          if (res.code === 0) {
            this.$message.error("所有种养品种表格获取失败");
          }
          let data = res.data;
          // 赋值总条数
          this.totalSizetwo = data.totalElements;
          // 赋值数组
          this.tableDatatwo = data.content;

          let havline = this.tableDatatwo.length % this.pageSizetwo;
          if (this.tableDatatwo.length < this.pageSizetwo) {
            if (havline < this.pageSizetwo) {
              const remain = this.pageSizetwo - havline;
              for (var i = 0; i < remain; i++) {
                this.tableDatatwo.push({
                  indflag: i + this.tableDatatwo.length - 1
                });
              }
            }
          }

          this.resetActionBar();
          this.addActive = false;
        });
    },
    async getSelect() {
      const { data: res } = await nowpagereq.getAllBList();
      this.plantTypeList = res;
      const { data: ress } = await nowcategory.querybycondition({
        organizationNo: sessionStorage.organizationNo
      });
      this.categoryTypeList = ress;
      // let arr = []
      // res.forEach(element => {
      //   arr.push({
      //     materialTypeName: element.materialTypeName,
      //     plantTypeNo: element.plantTypeNo
      //   })
      // });

      // let map = new Map();
      // for (let item of arr) {
      //   if (!map.has(item.plantTypeNo)) {
      //     map.set(item.plantTypeNo, item);
      //   }
      // }
      // this.materialTypeList = [...map.values()];

      //   this.materialList = []
      //   let arrs = []
      //   res.forEach(element => {
      //     arrs.push({
      //       text: element.materialName,
      //       value: element.materialNo
      //     })
      //   });

      //   let maps = new Map();
      //   for (let item of arrs) {
      //     if (!maps.has(item.value)) {
      //       maps.set(item.value, item);
      //     }
      //   }
      //   this.materialList = [...maps.values()];
      // },
      // filterTag(value, row) {
      //   return row.plantTypeNo === value;
      // },
      // filterTags(value, row) {
      //   return row.materialNo === value;
    },
    // 表格点击
    handleEdit(list) {
      this.formData = JSON.parse(JSON.stringify(list));
    },
    handleAdd(list) {
      this.formData = JSON.parse(JSON.stringify(list));
      this.nowChanceStau = "add";
      this.titleText = "添加";
      this.dialogFormVisible = true;
    },
    search() {
      this.currentPage = 1;
      this.getTableDataListone();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataListone();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataListone();
    },
    changePageSizetwo(pageSize) {
      this.pageSizetwo = pageSize;
      this.getTableDataListtwo();
    },
    searchtwo() {
      this.currentPage = 1;
      this.getTableDataListtwo();
    },
    changeCurrentPagetwo(currentPage) {
      this.currentPagetwo = currentPage;
      this.getTableDataListtwo();
    },
    handleSelectionChange(list) {
      this.nowselectedList = [];
      this.nowselectedList = list.map(item => {
        return item.id;
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    handleSelectionChangetwo(list) {
      this.nowselectedTwoList = [];
      // this.nowselectedTwoList = list.map((item) => {
      //   return item.plantVarietyNo;
      // });
      let lists = list.map(item => {
        if (item.plantVarietyNo) {
          return item.plantVarietyNo;
        } else {
          return "";
        }
        // return {
        //   'description': item.description,
        //   'unitNo': item.unitNo,
        //   'unitTypeName': item.unitTypeName,
        //   'unitTypeNo': item.unitTypeNo,
        //   'symbol': item.symbol,
        //   'basicRatio': item.basicRatio,
        //   'organizationNo': sessionStorage.getItem('organizationNo') }
      });
      var r = lists.filter(function(s) {
        return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
      });
      this.nowselectedTwoList = r;
      if (this.nowselectedTwoList && this.nowselectedTwoList.length > 0) {
        this.addActive = true;
      } else this.addActive = false;
    },
    handleImg(e) {
      nowpagereq.seeimgmet(e).then(res => {
        if (res.code === 1) {
          if (res.data) {
            this.handleImgUrl = res.data.pictureData;
            this.dialogVisible = true;
          }
        } else {
          this.$message.warning("暂无图片！！！");
        }
      });
    },
    addImg(e) {
      nowpagereq.seeimgmet(e).then(res => {
        if (res.code === 1) {
          if (res.data) {
            this.handleImgUrl = res.data.pictureData;
            this.dialogVisible = true;
          }
        } else {
          this.$message.warning("暂无图片！！！");
        }
      });
    },
    handleImgs(e) {
      nowpagereq.seeimgmets(e).then(res => {
        if (res.code === 1) {
          if (res.data) {
            this.handleImgUrl = res.data.pictureData;
            this.dialogVisible = true;
          }
        } else {
          this.$message.warning("暂无图片！！！");
        }
      });
    },
    handleDelete(no) {
      this.$confirm("是否删除种养品种？", "删除种养品种", {
        distinguishCancelAndClose: true,
        confirmButtonClass: "btnFalses",
        confirmButtonText: "删除",
        cancelButtonText: "取消删除"
      })
        .then(() => {
          nowpagereq.dellist([no]).then(res => {
            if (res.code === 1) {
              this.$message.success("删除成功");
              this.getTableDataListone();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(action => {
          // this.$message({
          //   type: 'info',
          //   message: action === 'cancel'
          //     ? '取消删除'
          //     : '停留在当前页面'
          // })
        });
    },
    adds() {
      nowpagereq.addlist(this.nowselectedTwoList).then(res => {
        if (res.code === 1) {
          this.getTableDataListone();
          this.$message.success("添加成功");
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    fileClick() {
      document.getElementById("inpu").click();
    },
    fileChange(el) {
      // const list = this.$refs.file.files;
      if (!el.target.files[0].size) return;
      this.fileList(el.target);
      el.target.value = "";
    },
    fileList(fileList) {
      let files = fileList.files;
      for (let i = 0; i < files.length; i++) {
        // 判断是否为文件夹
        if (files[i].type !== "") {
          this.fileAdd(files[i]);
        } else {
          // 文件夹处理
          this.folders(fileList.items[i]);
        }
      }
    },
    // 文件夹处理
    folders(files) {
      let _this = this;
      // 判断是否为原生file
      if (files.kind) {
        files = files.webkitGetAsEntry();
      }
      files.createReader().readEntries(function(file) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            _this.foldersAdd(file[i]);
          } else {
            _this.folders(file[i]);
          }
        }
      });
    },
    foldersAdd(entry) {
      let _this = this;
      entry.file(function(file) {
        _this.fileAdd(file);
      });
    },
    fileAdd(file) {
      // 总大小
      this.size = this.size + file.size;
      let reader = new FileReader();
      reader.vue = this;
      reader.readAsDataURL(file);
      reader.onload = function() {
        file.src = this.result;
        this.vue.imgList.push({
          file
        });
      };
    },
    fileDel(index) {
      this.imgList.splice(index, 1);
    },
    bytesToSize(bytes) {
      if (bytes === 0) return "0 B";
      let k = 1000; // or 1024
      let sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
      let i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
    },
    save() {
      if (this.nowChanceStau === "add") {
        var form = document.forms.namedItem("fileinfo");
        this.formDatas = new FormData(form);
        let organizationNo = sessionStorage.organizationNo;
        this.formDatas.append("organizationNo", organizationNo);
        this.formDatas.append("plantVarietyNo", this.formData.plantVarietyNo);
        for (let i = 0; i < this.imgList.length; i++) {
          this.formDatas.append("file", this.imgList[i].file);
          // console.log(this.imgList);
        }
        axios({
          url:
            this.$baseurl.webServiceUrl +
            "v3/templateTenant/plantVarietyPicture/add",
          // url: 'http://192.168.1.85:40029' + "/disease/add",
          // url: "http://192.168.1.85:8080/fileArg/receive",
          method: "post",
          headers: {
            databaseName: sessionStorage.databaseName,
            accessToken: sessionStorage.token,
            enctype: "multipart/form-data",
            organizationList: sessionStorage.organizationList,
            organizationNo: sessionStorage.organizationNo,
            virtualSystemNo: sessionStorage.virtualSystemNo
          },
          data: this.formDatas
        }).then(res => {
          if (res.data.code === 1) {
            this.getTableDataListone();
            this.$message.success("添加成功！");
          } else {
            this.$message.warning("添加失败！");
          }
        });
      } else if (this.nowChanceStau === "edit") {
        let form = document.forms.namedItem("fileinfo");
        this.formDatas = new FormData(form);
        let organizationNo = sessionStorage.organizationNo;
        this.formDatas.append("organizationNo", organizationNo);
        this.formDatas.append("plantVarietyNo", this.formData.plantVarietyNo);
        this.formDatas.append("plantVarietyPictureNo", this.formData.pictureNo);
        // this.formDatas.append("growthPhaseNo", '1111');
        for (let i = 0; i < this.imgList.length; i++) {
          this.formDatas.append("file", this.imgList[i].file);
          // console.log(this.imgList);
        }
        axios({
          url:
            this.$baseurl.webServiceUrl +
            "v3/templateTenant/plantVarietyPicture/edit",
          // url: 'http://192.168.1.85:40029' + "/disease/add",
          // url: "http://192.168.1.85:8080/fileArg/receive",
          method: "post",
          headers: {
            databaseName: sessionStorage.databaseName,
            accessToken: sessionStorage.token,
            enctype: "multipart/form-data",
            organizationList: sessionStorage.organizationList,
            organizationNo: sessionStorage.organizationNo,
            virtualSystemNo: sessionStorage.virtualSystemNo
          },
          data: this.formDatas
        }).then(res => {
          if (res.data.code === 1) {
            this.getTableDataListone();
            this.$message.success("修改成功！");
          } else {
            this.$message.warning("修改失败！");
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.zhtabletitle {
  color: #31f7dd;
  margin-bottom: 10px;
}
// ::v-deep .el-message-box__wrapper {
//       background: red !important;
//   .el-message-box {
//     .btnFalses {
//       background: red !important;
//     }
//   }
// }
.img_box {
  display: flex;
  width: 100%;

  .img_size {
    position: relative;
    img {
      max-height: 220px;
      max-width: 33%;
    }
    .remove_logo {
      position: absolute;
      top: 0;
      right: 0;
      height: auto;
      line-height: initial;
      font-size: 21px;
    }
  }
}

.add_img {
  margin-left: 10px;
  span {
    font-size: 34px;
    display: inline-block;
    border: 1px solid #0b8e8b;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    font-family: "微軟正黑體 Light", "楷体", "宋体";
  }
}
::v-deep .VarietyImg {
  .el-dialog {
    min-width: 30%;
  }
}
</style>
